<template>
    <h3> 比特人的书架 </h3>
    <ul>
        <li v-for="item,index in books">
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="del(index)">删除</button>
        </li>
    </ul>
</template>

<script setup>
    import { ref } from 'vue'
    const books = ref([
        { id: 1, name: '《红楼梦》', author: '曹雪芹' },
        { id: 2, name: '《西游记》', author: '吴承恩' },
        { id: 3, name: '《⽔浒传》', author: '施耐庵' },
        { id: 4, name: '《三国演义》', author: '罗贯中' }
    ])
    const del = (index) => {
        if(window.confirm("请问确认删除吗？"))
            books.value.splice(index, 1)
    }
</script>

<style>
    h3{
        padding-left: 10px;
    }
    #app{
        width: 300px;
        margin: 100px auto;
        /* border: 1px  solid #aaa; */
    }
    ul{
        list-style: none;
    }
    li{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0px;
        border-bottom: 1px solid #ccc;
    }
</style>